<template>
	<div>
		<!-- 监听机制 -->
		<!-- 姓 <input type="text" v-bind:value="xing" > <br> -->
		姓 <input type="text" v-model="xing" > <br>
		名 <input type="text" v-model="ming" > <br>
		{{`${quan}`}}
	</div>
</template>

<script setup>
// 监听 一个数据|一组, 会影响其他的变量
import { ref,watch ,reactive} from 'vue';

let xing = ref("王")
let ming = ref("博")
let quan = ref("")
// 监听的是响应式的对象
watch(xing,(aa,old) => {
	console.log("新的值-->",aa);
	console.log("旧的值-->",old);
	quan.value = `${aa}先生`
})

// 监听的是一组数据,给的新值和旧值 ,都放到数组中
// watch([xing,ming],(aa,old) => {
// 	// ...
// 	let [cc,dd] = aa
// 	console.log("新的值-->",aa);
// 	console.log("旧的值-->",old);
// 	quan.value = `${cc}${dd}先生`
// })


</script>

<style  scoped>

</style>